<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-paper" color="red" size="18"></Icon> 基本资料
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            物资信息
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <!--<Button class="addBtn" v-if="userType==0">新增物资</Button>-->
	    <Input search enter-button="搜索" placeholder="请输入物资名字..." v-model="search" class="search-input" @on-search="goSearch"/>
	    <Table height="480" :columns="columns1" :data="datas">
	    	 <template slot-scope="{ row, index }" slot="count">
	    	 	<span>{{row.itemCount}}</span>
	    	 	<Tag color="error" v-if="row.itemCount<10">库存过低！</Tag>
	        </template>
	    </Table>
	</div>
</template>

<script>
	export default{
		name:'filesManager',
		data(){
			return{
				search:'',
				userType:null,
				columns1: [//表头
                    {
                        title: '物品编号',
                        key: 'itemId'
                    },
                    {
                        title: '物品名称',
                        key: 'itemName'
                    },
                    {
                        title: '供应商名称',
                        key: 'supplierName'
                    },
                    {
                    	title:'所属仓库',
                    	key:'warehouseName'
                    },
                    {
                        title: '规格/型号',
                        key: 'itemType'
                    },
                    {
                        title: '数量',
                        key: 'itemCount',
                        slot:'count'
                    },
                    {
                        title: '单价',
                        key: 'itemPrice'
                    },
                    {
                        title: '日期',
                        key: 'createTime'
                    }
                ],
				datas:[],//表格数据
			}
		},
		methods:{
			goSearch(){//搜索方法 点击搜索、或者按回车键都能触发
				if(this.search ==''){this.getItem();return}
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/selectItem',
	    			data:{
	    				itemName:that.search
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.datas = res.data.itemList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getItem(){//获取所有物资记录
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getItem',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code == 200){
	    				this.datas = res.data.itemList
	    			}else{
	    				this.$Message.error(res.data.msg);
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		created(){
			this.userType=this.LS.getLS('userType')
			this.getItem()
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.page-nav{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
}
.search-input{
	width:40%;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
</style>